﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Checkout || Gilbard</title>
    <div th:include="Common/common :: head"></div>
</head>

<body>
    
<div id="main-wrapper">
   
    <!--Header section start-->
    <div th:include="Common/common :: header"></div>
    <!--Header section end-->
    
    <!--Page Banner Area Start-->
    <div class="page-banner-area" style="background-image: url(assets/images/bg/page-bg.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-content text-center">
                        <h1>KINGS OF THE <br> WARRIORS</h1>
                        <a class="df-btn" href="#">Buy now</a>
                        <ul class="page-breadcrumb">
                            <li><a href="index1.html">Home</a></li>
                            <li>Checkout</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Area End-->
    
    <!--Checkout Area Start-->
    <div class="checkout-area section pt-95 pt-lg-75 pt-md-65 pt-sm-55 pt-xs-45">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- Checkout Form Start-->
                    <form th:action="@{/order}" class="checkout-form" method="post">
                       <div class="row row-40">

                           <div class="col-lg-7">

                               <!-- Billing Address -->
                               <div id="billing-form" class="mb-10">
                                   <h4 class="checkout-title">账单邮寄地址</h4>

                                   <div class="row">

                                       <div class="col-md-6 col-12 mb-20">
                                           <label>姓名</label>
                                           <input type="text" placeholder="姓名" name="name">
                                       </div>

                                       <div class="col-md-6 col-12 mb-20">
                                           <label>邮箱地址</label>
                                           <input type="email" placeholder="邮箱地址" name="email">
                                       </div>

                                       <div class="col-md-6 col-12 mb-20">
                                           <label>电话号码</label>
                                           <input type="text" placeholder="电话号码" name="phone">
                                       </div>

                                       <div class="col-12 mb-20">
                                           <label>公司名称</label>
                                           <input type="text" placeholder="公司名称" name="company">
                                       </div>

                                       <div class="col-12 mb-20">
                                           <label>地址</label>
                                           <input type="text" placeholder="地址" name="address">
                                       </div>

                                       <div class="col-md-6 col-12 mb-20">
                                           <label>国籍</label>
                                           <select class="nice-select" name="country">
                                                <option>美国</option>
                                                <option>中国</option>
                                                <option>俄罗斯</option>
                                                <option>印度</option>
                                                <option>日本</option>
                                           </select>
                                       </div>

                                       <div class="col-md-6 col-12 mb-20">
                                           <label>城市</label>
                                           <input type="text" placeholder="城市" name="city">
                                       </div>

                                       <div class="col-md-6 col-12 mb-20">
                                           <label>邮政编码</label>
                                           <input type="text" placeholder="邮政编码" name="code">
                                       </div>

                                   </div>

                               </div>

                           </div>

                           <div class="col-lg-5">
                               <div class="row">

                                   <!-- Cart Total -->
                                   <div class="col-12 mb-60">

                                       <h4 class="checkout-title" >购物车</h4>

                                       <div class="checkout-cart-total">

                                           <h4>游戏名称<span>总价格</span></h4>

                                           <ul>
                                               <li th:each="item:${session.cart.items}">[[${item.value.name}]]X[[${item.value.count}]]<span th:text="'$'+${item.value.totalPrice}"></span></li>
                                           </ul>

                                           <p>小计<span th:text="'$'+${session.cart.totalPrice}">$296.00</span></p>
                                           <p>运费<span>$00.00</span></p>

                                           <h4>总计<span th:text="'$'+${session.cart.totalPrice}">$296.00</span></h4>

                                       </div>

                                   </div>

                                   <!-- Payment Method -->
                                   <div class="col-12">

                                       <h4 class="checkout-title">Payment Method</h4>

                                       <div class="checkout-payment-method">

                                           <div class="single-method">
                                               <input type="radio" id="payment_check" name="payment-method" value="check">
                                               <label for="payment_check">Check Payment</label>
                                               <p data-method="check">Please send a Check to Store name with Store Street, Store Town, Store State, Store Postcode, Store Country.</p>
                                           </div>

                                           <div class="single-method">
                                               <input type="radio" id="payment_bank" name="payment-method" value="bank">
                                               <label for="payment_bank">Direct Bank Transfer</label>
                                               <p data-method="bank">Please send a Check to Store name with Store Street, Store Town, Store State, Store Postcode, Store Country.</p>
                                           </div>

                                           <div class="single-method">
                                               <input type="radio" id="payment_cash" name="payment-method" value="cash">
                                               <label for="payment_cash">Cash on Delivery</label>
                                               <p data-method="cash">Please send a Check to Store name with Store Street, Store Town, Store State, Store Postcode, Store Country.</p>
                                           </div>

                                           <div class="single-method">
                                               <input type="radio" id="payment_paypal" name="payment-method" value="paypal">
                                               <label for="payment_paypal">Paypal</label>
                                               <p data-method="paypal">Please send a Check to Store name with Store Street, Store Town, Store State, Store Postcode, Store Country.</p>
                                           </div>

                                           <div class="single-method">
                                               <input type="radio" id="payment_payoneer" name="payment-method" value="payoneer">
                                               <label for="payment_payoneer">Payoneer</label>
                                               <p data-method="payoneer">Please send a Check to Store name with Store Street, Store Town, Store State, Store Postcode, Store Country.</p>
                                           </div>

                                           <div class="single-method">
                                               <input type="checkbox" id="accept_terms">
                                               <label for="accept_terms">I’ve read and accept the terms & conditions</label>
                                           </div>

                                       </div>

                                       <button class="place-order df-btn">点击下单</button>

                                   </div>

                               </div>
                           </div>

                       </div>
                    </form> 
                    <!-- Checkout Form End-->
                </div>
            </div>
        </div>
    </div>
    <!--Checkout Area End-->
    
    <!--Projects section start-->
    <div class="newslatter-section newslatter-section-tow section pt-5 pt-lg-0 pt-sm-0 pt-xs-50 pb-xs-50">
        <div class="container">
           
            <div class="row">
               <div class="col-12">
                   <!--News Latter Area Start-->
                   <div class="news-latter-area newslatter-black">
                       <div class="news-latter-box">
                           <h3>订阅我们的时事通讯，获取所有信息 <br> 最新消息、更新、视频和优惠</h3>
                           <form action="#">
                               <input type="text" placeholder="Enter your email here">
                           </form>
                       </div>
                   </div>
                   <!--News Latter Area End-->
               </div> 
            </div>
            
        </div>
        
    </div>
    <!--Projects section end-->
    
    <!--Footer section start-->
    <footer class="footer-section style-2 section bg-theme" style="background-image: url(assets/images/bg/footer-bg.jpg)">
       
        <!--Footer Top start-->
        <div class="footer-top section pt-175 pt-lg-150 pt-md-125 pt-sm-110 pt-xs-40 pb-80 pb-lg-70 pb-md-60 pb-sm-15 pb-xs-40">
            <div class="container container-1520">
                <div class="row justify-content-lg-between">
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-2 col-md-3">
                        <div class="footer-widget">
                            <div class="footer-logo">
                                <a href="index1.html"><img src="assets/images/logo.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-6 col-lg-6 col-md-9">
                        <div class="footer-widget">
                            <div class="footer-nav">
                                <nav>
                                    <ul>
                                        <li><a href="#">forums</a></li>
                                        <li><a href="#">demo</a></li>
                                        <li><a href="#">support</a></li>
                                        <li><a href="#">terms & conditions</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-4 col-md-12">
                        <div class="footer-widget">
                            <div class="footer-social">
                               <span>follow us:</span>
                                <ul>
                                    <li><a href="#"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="#"><i class="icofont-twitter"></i></a></li>
                                    <li><a href="#"><i class="icofont-instagram"></i></a></li>
                                    <li><a href="#"><i class="icofont-youtube-play"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->    
                    
                </div>
            </div>
        </div>
        <!--Footer Top end-->
        
        <!--Footer bottom start-->
        <div class="footer-bottom border-color section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="copyright text-center">
                            <p>Copyright &copy;2018 <a  href="http://www.genban.org">Gilbard</a>. All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer bottom end-->
        
     </footer>
     <!--Footer section end-->
    
</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>

</body>

</html>